<template>
  <drag-dialog
    v-model="visible"
    :title="title"
    :width="width"
    append-to-body
    :close-on-click-modal="closeOnClickModal"
    class="anvil-code-dialog"
    @open="
      () => {
        afterOpen();
      }
    "
    @close="close"
  >
    <page-filling v-if="visible" :targetPageId="targetPageId" @close-and-refresh="closeAndRefresh" @close-and-set="closeAndSet" @only-close="close" />
    <template #footer v-if="showFooter || showSubmit || showCancel">
      <div v-if="showSubmit || showCancel">
        <el-button v-if="showCancel" type="default" @click="visible = false">{{ cancelText }}</el-button>
        <custom-button v-if="showSubmit" v-bind="submitBtnVbind" @custom-click="visible = false" />
      </div>
      <div v-if="showFooter">
        <dialog-footer @ok="handleSubmit" @cancel="close" />
      </div>
    </template>
  </drag-dialog>
</template>

<script>
import pageFilling from '../../views/page/filling/index.vue';
import { cloneDeep } from 'lodash-es';
import { useAnvilCodeStore } from '../../store/modules/code';
import jp from 'jsonpath';

export default {
  name: 'AnvilDialog',
  components: { pageFilling },
  provide() {
    return {
      // 接收从外部传来的数据
      getDataFromOthers: this.getDataFromOthers
    };
  },
  props: {
    title: {
      type: String,
      default: '模态框'
    },
    // 目标页面id
    targetPageId: {
      type: String,
      default: ''
    },
    // 必须的参数默认为false
    modelValue: {
      type: Boolean,
      default: false
    },
    // 是否接收页面内组件数据作为参数(旧)
    isAcceptData: {
      type: Boolean,
      default: false
    },
    // 页面内组件数据来源(旧)
    acceptData: {
      type: Array,
      default: () => []
    },
    // 提交事件配置(旧)
    submit: {
      type: Object,
      default: () => {}
    },
    // 是否展示操作按钮(旧)
    showFooter: {
      type: Boolean,
      default: false
    },
    // 展示提交按钮
    showSubmit: {
      type: Boolean,
      default: false
    },
    // 展示取消按钮
    showCancel: {
      type: Boolean,
      default: false
    },
    // 展示关闭按钮
    showClose: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    // 提交按钮配置
    submitBtn: {
      type: Object,
      default: () => {}
    },
    // 模态框宽度
    width: {
      type: String,
      default: ''
    },
    // 打开的回调
    afterOpen: {
      type: Function,
      default: () => {}
    },
    // 关闭的回调
    afterClose: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false,
      dataFromOthers: {}
    };
  },
  computed: {
    // 提交按钮的绑定属性
    submitBtnVbind() {
      return {
        ...(this.submitBtn || {}),
        pageId: this.$attrs.pageId
      };
    }
  },
  watch: {},
  methods: {
    open(data) {
      console.log('接收了', data);
      this.dataFromOthers = data;
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.afterClose();
    },
    closeAndRefresh() {
      // 此时必须要等待关闭自己完成后再进行回调，不然会出现父级页面重置后弹框留存问题
      this.close();
      this.$nextTick(() => {
        this.$emit('closeAndRefresh');
      });
    },
    closeAndSet(data) {
      this.close();
      this.$nextTick(() => {
        this.$emit('closeAndSet', data);
      });
    },
    // 旧提交按钮的逻辑
    handleSubmit() {
      if (this.isAcceptData) {
        const params = this.getCompDataInner();
        this.customSubmit(params);
      } else {
        this.customSubmit();
      }
      this.close();
    },
    // 根据配置获取表单内组件数据
    getCompDataInner() {
      const anvilCodeStore = useAnvilCodeStore();
      if (this.acceptData && this.acceptData.length) {
        // 目前只接收一个传参
        const { pageId, type, component, event } = this.acceptData[0];

        const instance = anvilCodeStore.getInstance(pageId, type, component);

        if (instance) {
          return instance[event]();
        } else {
          return null;
        }
      }
    },
    // 自定义提交事件
    customSubmit(params) {
      const anvilCodeStore = useAnvilCodeStore();

      if (this.submit.length) {
        this.submit.map((item) => {
          try {
            const { pageId, type, component, event, jsonPath } = item;

            const instance = anvilCodeStore.getInstance(pageId, type, component);

            let data = params;
            if (params && jsonPath) {
              data = jp.query(params, jsonPath)[0];
            }

            if (instance) {
              instance[event](data);
            }
          } catch (e) {
            console.log('customSubmit error!', e);
          }
        });
      }
    },
    getDataFromOthers() {
      return this.dataFromOthers;
    }
  }
};
</script>
